<template>

    <div id="purchase" class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box;overflow:hidden;">
        <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px;">
            <div style="box-sizing: border-box;">
                <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
                    <el-form class="box-f" ref="queryForm" :inline="true">
                        <el-form-item :label="$t('etLpj7x6AiPGmEayJgpA')">
                            <el-input style="width:120px;" v-model="searchOne" :placeholder="$t('svGiy9tupjETtxzuWn7B1')" clearable  />
                        </el-form-item>
                        <el-form-item :label="$t('7RlCj4Nbrp_8pRUx52bZl')">
                            <el-input style="width:120px;" v-model="searchTwo" :placeholder="$t('e46iGksDy5OuDMhqM3n5')" clearable  />
                        </el-form-item>
                        <el-form-item style="margin-right: 0">
                            <el-button @click="resetClick" icon="ele-Refresh"> {{ $t('eE3IedvHkKmnppI9FzCa7') }} </el-button>
                            <el-button @click="searchClick" type="primary" icon="ele-Search"> {{ $t('5fM07d4lwWlNvcG51m0ao') }} </el-button>
                            <el-button v-if="$hasPer('purchase:add')" @click="nodeClick('')" icon="ele-Plus" type="primary"> {{ $t('pHffUvbUz5WiB968KohMs') }} </el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>

            <div style="box-sizing: border-box;margin-top: 8px;" class="flex-1 pos-r">
                <div class="pos-a w-h-100" style="box-sizing: border-box;">
                    <el-card class="box-card w-h-100" shadow="hover" style="">
                        <div style="" class="w-h-100 ver-flex">
                            <div class="flex-1 pos-r">
                                <div class="pos-a w-h-100">

                                    <el-table 
                                        :data="list" 
                                        class="w-h-100" 
                                        style="width: 100%; 
                                        margin-bottom: 20px" 
                                        row-key="id"
                                        default-expand-all
                                        v-loading="loading"
                                        element-loading-background="rgba(122, 122, 122, 0.8)"
                                    >
                                        <!-- <el-table-column type="index" label="序号" width="55" align="center" :index="indexMethod" /> -->
                                        <el-table-column prop="company" show-overflow-tooltip :label="$t('hjoyTgTlxBYtRXhPvPsIv')"  align="center" />
                                        <el-table-column prop="informStaffID" show-overflow-tooltip :label="$t('q6BObE8Bs2Xg47J9Aaefq')" align="center" />
                                        <el-table-column prop="typeNumber" show-overflow-tooltip :label="$t('lFhWlPJxeAidGf75JpaW7')" align="center" />
                                        <el-table-column prop="typeName" show-overflow-tooltip :label="$t('yjDxjEmNmzQbGtbZ3sU')" align="center" />
                                        <el-table-column prop="hireState" show-overflow-tooltip :label="$t('xjvHimzi4WbLf3ZyVLcNb')" align="center" />
                                        <!-- <el-table-column label="操作" align="center" >
                                            <template #default="scope">
                                                <el-popconfirm
                                                    v-if="!scope.row.status"
                                                    confirm-button-text="确认"
                                                    cancel-button-text="取消"
                                                    icon="InfoFilled"
                                                    icon-color="#626AEF"
                                                    title="删除这条数据?"
                                                    @confirm="deleteHandle(scope.row)"
                                                >
                                                    <template #reference>
                                                        <el-button class="icon-e" icon="ele-Delete" size="small" text type="danger"> 删除 </el-button>
                                                    </template>
                                                </el-popconfirm>
                                            </template>
                                        </el-table-column> -->
                                    </el-table>
                                </div>
                            </div>
                            <div style="height: 30px;margin-top: 20px;" class="hr-flex-start">
								<el-pagination
									v-model:currentPage="pageNo"
									v-model:page-size="pageSize"
									:total="totalRows"
									:page-sizes="[10, 20, 50, 100]"
									small
									background
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									layout="total, sizes, prev, pager, next, jumper"
									class="w-h-100"
								/>
							</div>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
        <AddPurchase
            :repairInfo="repairInfo"
            :isUseDialog="isUseDialog"
            @cancelUseClick="cancelUseClick"
            @controlUseClick="controlUseClick"
        />
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, toRefs , reactive , onMounted , toRaw, Ref } from 'vue'
import { cgDistributeTypePage , sysCheckflowDelete , cgMaterialTypeGetUnDeal } from '/@/api/manage/manage.ts'
import AddPurchase from './component/add-purchase.vue'
import { ElCard, ElForm, ElFormItem, ElSelect, ElOption, ElInput, ElButton, ElTable, ElTableColumn, ElPopconfirm, ElPagination } from 'element-plus'
import { list } from 'postcss'
interface formType {
    list: any[], // 数组
    pageNo: number, // 当前页
    pageIndex: number,
    pageSize: number, // 一页的数量
    totalRows: number, // 总条数
    totalPage: number, // 总页数
}
export default defineComponent( {
    name: 'purchase',
    components: {
        AddPurchase
    },
    setup(props){
        const isUseDialog = ref() // 新增/编辑弹出框隐藏/显示
        const repairInfo = ref() // 传递子组件数据
        let pageNo:number = 1
        let pageSize:number = 10
        const searchOne = ref()
        const searchTwo = ref()
        const loading = ref(false)

        /*** searchClick 查询按钮 */
        const searchClick = () => {
            // if(searchOne.value){
            //     searchObj.name = searchOne.value
            // }else{
            //     searchOne.value
            // }
            GetData(pageNo,pageSize)
        }

        /*** resetClick 重置按钮 */
        const resetClick = () => {
            searchTwo.value = ''
            searchOne.value = ''
            GetData(1,10)
        }

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive < formType > ({
            list: [], // 数组
            pageNo: 1, // 当前页
            pageIndex: 1,
            pageSize: 10, // 一页的数量
            totalRows: 0, // 总条数
            totalPage: 0, // 总页数
        })

        /*** nodeClick 新增/编辑点击事件 */
        const nodeClick = (val:string | object) => {
            val !== '' ? repairInfo.value = JSON.stringify(toRaw(val)) : repairInfo.value = ''
            isUseDialog.value = true
        }

        const handleSizeChange = (val:any) => {
            pageSize = val
            GetData(pageNo,val)
        } 

        const handleCurrentChange = (val:any) => {
            pageNo = val
            GetData(val,pageSize)
        }

        const GetInfo = async () => {
            try {
                let res = await cgMaterialTypeGetUnDeal()
                if(res.success){
                    console.log(res.data,'data')
                }
            } catch (err) {return}
        }

        const GetData = async (n:number,s:number) => {
            loading.value = true
            let param:any = {}
            param.pageNo = n
            param.pageSize = s
            if(searchOne.value){
                param.TypeName = searchOne.value
            }
            if(searchTwo.value){
                param.StaffName = searchTwo.value
            }
            // console.log(searchOne.value,'searchOne')
            // console.log(searchTwo.value,'searchTwo')
            let res = await cgDistributeTypePage(param)
            if(res.success){
                let setArr:any[] = []
                res.data.rows.map((i:any) => {
                    let setObj = {
                        children: i.distributeTypes,
                        company: i.staffName,
                        status: true,
                        id: i.staffID
                    }
                    setArr.push(setObj)
                })
                console.log(setArr,'setArr')
                state.list = setArr
                state.pageIndex = res.data.pageSize
                state.pageNo = res.data.pageNo
                state.totalPage = res.data.totalPage
                state.totalRows = res.data.totalRows
                loading.value = false
            }
        }

        // 设置序列号
        const indexMethod = (index: number) => {
            if (state.pageNo > 1) {
                return index + 1 + (Number(state.pageNo) - 1) * Number(state.pageSize);
            } else {
                return index + 1;
            }
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            isUseDialog.value = false
        }

        /*** controlUseClick 提交事件 */
        const controlUseClick = (val:any) => {
            if (val === 'success') {
                GetData(pageNo,pageSize)
            }
            isUseDialog.value = false
        }

        /*** deleteHandle 删除事件 */
        const deleteHandle = async (val:any) => {
            if(toRaw(val).status){
                console.log('有测试')
            }
            return
            let param = {id : val}
            try {
                let res = await sysCheckflowDelete(param)
                if(res.success){
                    GetData(pageNo,pageSize)
                }
            } catch (err) { return }
        }

        onMounted(() => {
            GetInfo()
            GetData(pageNo,pageSize)
        })



        return {
            ...toRefs(state),
            handleSizeChange,
            handleCurrentChange,
            indexMethod,
            isUseDialog,
            cancelUseClick,
            controlUseClick,
            nodeClick,
            repairInfo,
            deleteHandle,
            searchOne,
            searchTwo,
            searchClick,
            resetClick,
            loading,
        }
    },
} )
</script>
<style scoped lang="scss">
    #purchase {
        .box-f{
            :deep(.el-form-item__label){
                padding: 0;
            }
        }
        :deep(.el-card__body) {
            height: 100%;
        }
        ul {

            list-style: none;

            li {
                cursor: pointer;

                &:hover {
                    color: red;
                }
            }
        }
        .icon-e{
            :deep(.el-icon){
                margin-right: 0px!important;
            }
        }
        :deep(.el-table__row--level-0){
            background-color: #dde0e6;
            .el-table__cell{
                text-align: left!important;
            }
        }
    }
</style>